<template>
    <div>
        <h1>试卷详情</h1>
        <div class="box">
            <h2>
                <span>总分:100</span>
                &nbsp;
                <span>题目:<span>20</span>道</span>
                &nbsp;
                <span>班级:<span>JaVA87</span></span>
                &nbsp;
                <span>难度:<span>87%</span></span>
            </h2>
            <!-- 单选 -->
            <div class="box_div">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="1  请选择一个选项" prop="resource">
                        <br />
                        <el-radio-group v-model.trim="ruleForm.resource">
                            <el-radio label="1">
                                A选项1
                                <span class="dan">(正确答案)</span>
                            </el-radio>
                            <br>
                            <el-radio label="2">B选项2</el-radio>
                            <br>
                            <el-radio label="3">C选项3</el-radio>
                            <br>
                            <el-radio label="4">D选项4</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div class="box_div_div">
                    <span>java</span>
                    <span>5周</span>
                    <span>易</span>
                    <span>5分</span>
                </div>
            </div>
            <!-- 填空 -->
            <div class="box_div">
                <el-form ref="form" :model="form">
                    <p><b>WEB开发中常用开发工具有?</b></p>
                    <el-form-item label="">
                        <el-input type="textarea" v-model.trim="form.desc" :rows="2" class="wby"></el-input>
                    </el-form-item>
                </el-form>
                <div class="box_div_div">
                    <span>java</span>
                    <span>5周</span>
                    <span>易</span>
                    <span>5分</span>
                </div>
            </div>
        </div>
        <div class="buttom">
            <div class="d1" style="width:400px">
                <span>试卷地址</span>
                <br />
                <el-input v-model.trim="input3" placeholder=""></el-input>
            </div>
            <el-button type="primary">编辑试卷</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: "",
            input: '',
            input2: '',
            input3: '',
            ruleForm: {
                resource: ""
            },
            // 单选带*号
            rules: {
                resource: [
                    { required: true, message: "请选择活动资源", trigger: "change" }
                ]
            },
            form: {
            },
        }
    }
}
</script>

<style lang="less" scoped>
.wby {
    width: 800px;
}

h2 {
    margin-top: 0;
}

h1 {
    text-align: left;
    padding-left: 10px;
}

.box {
    text-align: left;
    padding: 5px 20px;
}

.box_d1 {
    display: flex;
}

.d1 {
    width: 150px;
    margin-left: 20px;
}

.d1>span {
    float: left;
}

.el-radio {
    margin-left: 40px;
    margin-bottom: 20px;
}

.box_div {
    overflow: hidden;
    margin-left: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid #909399;
}

.dan {
    color: #67c23a;
}

.box_div_div {
    float: right;
}

.box_div_div>span {
    padding: 5px 20px;
    background: #909399;
    font-size: 12px;
    color: #fff;
    margin-left: 10px;
}

.buttom {
    display: flex;
    width: 700px;
    margin: auto;
}

.el-button {
    height: 40px;
    margin-top: 20px;
    margin-left: 10px;
}
</style>